<template>
<<<<<<< HEAD
  <div 
    class="component"
    :style="{
      transform: 'scale(' + (selected ? (375 / 335) : 1) + ')'
    }"
    @touchmove.capture="touchMove"
    >
    <van-image
      width="670rpx"
      height="320rpx" 
      :src="info.src"
      fit="cover"
      lazy-load
      use-loading-slot
      use-error-slot
      >
      <van-loading
        slot="loading"
        size="20" vertical 
        color="#1989fa"
        />
      <text slot="error">加载失败</text>
    </van-image>
    <div class="introduce flex-column">
      <div class="title">{{info.title}}</div>
      <div class="information flex-row">
        <van-rate
          :value="info.score"
          size="11"
          allow-half
          color="#ee0a24"
          void-color="#A9A7B8"
          void-icon="star"
          bind:change="onChange"
        />
        <div class="score">{{info.score}} / 5.0</div>
        <div class="dot"></div>
        <div class="distance">{{info.distance}}</div>
      </div> 
=======
  <div class="component">
    <my-image :src="info.src" />
    <div class="des">
      <spot-card-describe :info="info" />
>>>>>>> dev
    </div>
    <div class="content"
      :class="{'active': selected }"
      >
      <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, dolorem quidem? Vel, exercitationem velit quos, necessitatibus nostrum nemo temporibus voluptate magnam facere quaerat porro veniam eius facilis quae aut! Corporis?
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, dolorem quidem? Vel, exercitationem velit quos, necessitatibus nostrum nemo temporibus voluptate magnam facere quaerat porro veniam eius facilis quae aut! Corporis?
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, dolorem quidem? Vel, exercitationem velit quos, necessitatibus nostrum nemo temporibus voluptate magnam facere quaerat porro veniam eius facilis quae aut! Corporis?
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, dolorem quidem? Vel, exercitationem velit quos, necessitatibus nostrum nemo temporibus voluptate magnam facere quaerat porro veniam eius facilis quae aut! Corporis?
      </div>
    </div>
  </div>  
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true
    },
    selected: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      required: true
    }
  },
  methods: {
    touchMove(event) {
      console.log("in")
      // stopPropagation
      // preventDefault
      console.log(event)
      event.stopPropagation()
      event.preventDefault()
      return false
    }
  }
}
</script>

<style lang="less" scoped>
@title-size: 34rpx;
@info-size: 22rpx;
@primery-color: #000000;
@second-color: #A9A7B8;
.component {
  box-shadow: 0px 10rpx 24rpx rgba(0, 0, 0, .1);
<<<<<<< HEAD
  transition: .5s ease-in-out;
  transform-origin: 50% 0;
  .introduce {
    height: 160rpx;
    background-color: rgba(255, 255, 255, 1);
=======
  .des {
    background-color: #ffffff;
    box-sizing: border-box;
>>>>>>> dev
    padding: 0 40rpx;
  }
<<<<<<< HEAD
  .content {
    background-color: burlywood;
    font-size: 32rpx;
    height: 0;
    transition: .5s ease-in-out;
    overflow: hidden;
    &.active {
      height: 100vh;
    }
  }
=======
>>>>>>> dev
}
</style>